<!--
 * @Description: 
 * @Author: duan_shuangjun 丶
 * @Date: 2025-09-03 16:42:13
 * @LastEditTime: 2025-09-03 22:22:46
-->
<template>
  <div>
    <div class="bill-card-box">
      <div class="title">
        {{ dealAssignDataFunction('', bookTicketDetailData?.detail?.shopInfo?.shop_name) }}
      </div>
      <div class="description">【预订单】</div>
      <div class="desc-item">
        <div>预订单号：</div>
        <span>{{ dealAssignDataFunction('', bookTicketDetailData?.ticket_id) }}</span>
      </div>
      <div class="desc-item">
        <div>操作人：</div>
        <span>{{ dealAssignDataFunction('', bookTicketDetailData?.detail?.clerkName) }}</span>
      </div>
      <div class="desc-item">
        <div>预订人数：</div>
        <span>{{
          dealAssignDataFunction(0, bookTicketDetailData?.detail?.bookInfo?.use_num)
        }}</span>
      </div>
      <div class="desc-item">
        <div>预订席数：</div>
        <span>{{
          dealAssignDataFunction(0, bookTicketDetailData?.detail?.bookInfo?.book_num)
        }}</span>
      </div>
      <div class="desc-item">
        <div>单席金额：</div>
        <span>{{ dealAssignDataFunction(0, bookTicketDetailData?.detail?.bookInfo?.money) }}</span>
      </div>
      <div class="desc-item">
        <div>预订类型：</div>
        <span>{{
          dealAssignDataFunction('', bookTicketDetailData?.detail?.bookInfo?.bookType?.name)
        }}</span>
      </div>
      <div class="desc-item">
        <div>预订时间：</div>
        <span>{{
          dealAssignDataFunction('', bookTicketDetailData?.detail?.bookInfo?.book_time?.text)
        }}</span>
      </div>
      <div class="desc-item">
        <div>预订人：</div>
        <span>{{
          dealAssignDataFunction('', bookTicketDetailData?.detail?.bookInfo?.user_name)
        }}</span>
      </div>
      <div class="desc-item">
        <div>联系方式：</div>
        <span>{{
          dealAssignDataFunction('', bookTicketDetailData?.detail?.bookInfo?.mobile)
        }}</span>
      </div>
      <div class="desc-item">
        <div>预订金：</div>
        <span>{{
          dealAssignDataFunction(0, bookTicketDetailData?.detail?.bookInfo?.book_money)
        }}</span>
      </div>
      <div class="desc-item">
        <div>支付方式：</div>
        <span>{{ payType }}</span>
      </div>
      <div class="desc-item">
        <div>备注：</div>
        <div class="remark-desc">
          {{ dealAssignDataFunction('', bookTicketDetailData?.detail?.bookInfo?.remark) }}
        </div>
      </div>
      <div class="desc-line"></div>
      <div class="desc-title">桌台详情</div>
      <div class="desc-item">
        <div>主台：</div>
        <span>{{ dealAssignDataFunction('无', bookTicketDetailData?.detail?.mainDeskName) }}</span>
      </div>
      <div class="desc-item">
        <div>配台：</div>
        <span>{{ dealAssignDataFunction('无', bookTicketDetailData?.detail?.subDeskName) }}</span>
      </div>
      <div class="desc-line"></div>
      <template v-if="dealAssignDataFunction(false, bookTicketDetailData?.detail?.foodList)">
        <div class="desc-title">预订菜品</div>
        <div class="desc-item">
          <div class="food-name">菜品名称</div>
          <p class="food-num">数量</p>
          <div class="food-money">金额</div>
        </div>
        <div class="desc-line"></div>
        <div
          class="good-list-box"
          v-for="(food, foodIndex) in bookTicketDetailData?.detail.foodList"
          :key="foodIndex"
        >
          <div class="good-item">
            <div class="foodName">{{ food.name }}</div>
            <p class="foodNum">{{ food.num }}份</p>
            <span>￥{{ food.total_money }}</span>
          </div>
          <div class="good-item mt-10" v-if="dealFoodSkuDescFun(food)">
            <span class="font_8">({{ dealFoodSkuDescFun(food) }})</span>
          </div>
        </div>
        <div class="desc-line"></div>
      </template>
      <div class="desc-item">
        <div>合计金额：</div>
        <span>{{
          dealAssignDataFunction(0, bookTicketDetailData?.detail?.priceInfo?.payMoney)
        }}</span>
      </div>
      <div class="address-phone-box">
        <div>
          餐厅地址：{{
            dealAssignDataFunction('', bookTicketDetailData?.detail?.shopInfo?.address)
          }}
        </div>
        <div>
          餐厅电话：{{ dealAssignDataFunction('', bookTicketDetailData?.detail?.shopInfo?.phone) }}
        </div>
        <div>技术支持：贵州一粒米科技餐饮软件服务有限公司</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { deskBookTicketDetail } from '@/api/book'
import { dealAssignDataFunction } from '@/utils/toolsValidate'

interface Props {
  selectedBookData: any
}
const props = defineProps<Props>()

const bookTicketDetailData = ref<any>(null)

const payTypeOptionsList = [
  { value: 'wechat', label: '微信支付' },
  { value: 'alipay', label: '支付宝' },
  { value: 'balance', label: '余额' },
  { value: 'cash', label: '现金' },
  { value: 'on_account', label: '挂账' },
  { value: 'virtual', label: '虚收' },
  { value: 'integripay', label: '积分' }
]

const payType = computed(() => {
  const v = bookTicketDetailData.value?.detail?.bookInfo?.pay_type
  return payTypeOptionsList.find(i => i.value === v)?.label || ''
})

function dealFoodSkuDescFun(item: any) {
  if (item?.notes?.length) return item.notes.join('、')
  return false
}

watch(
  () => props.selectedBookData?.id,
  newId => {
    if (newId) getDeskBookTicketDetail(newId)
    else bookTicketDetailData.value = null
  },
  { immediate: true }
)

function getDeskBookTicketDetail(id: string | number) {
  const datas: any = { book_id: id }
  deskBookTicketDetail(datas).then((res: any) => {
    if (res?.status === 200) {
      bookTicketDetailData.value = dealAssignDataFunction(null, res?.data?.list?.[0])
    } else {
      bookTicketDetailData.value = null
    }
  })
}
</script>

<style lang="scss" scoped>
.hide {
  display: none;
}
.show {
  display: block;
  width: 420px;
}
.bill-card-box::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.bill-card-box {
  width: 420px;
  height: 886px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  padding: 30px;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  .title {
    font-size: 20px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
  }
  .description {
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
    margin: 10px 0;
  }
  .desc-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    color: #333333;
    .remark-desc {
      max-width: 250px;
      text-align: right;
    }
  }
  .good-list-box {
    margin-top: 10px;
    .good-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Bold;
      font-weight: 700;
      color: #000000;
      text-align: left;
      .foodName {
        text-align: left;
        width: 150px;
        line-height: 16px;
      }
      .foodNum {
        width: 130px;
        text-align: left;
      }
    }
  }
  .mt-10 {
    margin-top: 10px;
  }
  .desc-line {
    width: 360px;
    height: 1px;
    background: #e2e2e2;
    margin-top: 10px;
  }
  .desc-title {
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
    margin: 20px 0 10px 0;
  }
  .address-phone-box {
    margin-top: 50px;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #333333;
    line-height: 24px;
    > div {
      margin-bottom: 10px;
    }
  }
}
</style>
